<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器</title>
  <!-- 内部样式 -->
  <style>
    /* li:nth-child(3){color: red;} */
    /* 想让所有的子类奇数项红色 n从0开,到20结束 1,,3,5...51  */    
    /* li:nth-child(2n+1){
      color: red;
    } */
    /* li:nth-child(odd){color: red;} */
    /* 让左右的偶数的子类变成绿色,0,2,4 */
    /* li:nth-child(2n){
      color:green;
    } */
    /* li:nth-child(even){color: royalblue;} */
    /* n 0-20 0--20 3-0,子类是从1开始算的 */
    li:nth-child(-n+3){color:red}
  </style>
</head>
<body>
  <!-- emmet语法快速写出20个li -->
<ul>
  <li>我是li1</li>
  <li>我是li2</li>
  <li>我是li3</li>
  <li>我是li4</li>
  <li>我是li5</li>
  <li>我是li6</li>
  <li>我是li7</li>
  <li>我是li8</li>
  <li>我是li9</li>
  <li>我是li10</li>
  <li>我是li11</li>
  <li>我是li12</li>
  <li>我是li13</li>
  <li>我是li14</li>
  <li>我是li15</li>
  <li>我是li16</li>
  <li>我是li17</li>
  <li>我是li18</li>
  <li>我是li19</li>
  <li>我是li20</li>
</ul>
</body>
</html>